<template>
	<view class="con">
		<view class="bgF9F9F9 ra20 flex-a-i">
			<view class="flex-a-i bgF9F9F9 flex1 ra20 height80">
				<image mode="widthFix" src="/static/sou.png" class="image mr20 ml30 width40"></image>
				<input confirm-type="search" @confirm="tapsearch" placeholder-style="color:#898D92;" class="size28 flex1" v-model="key" placeholder="请输入要查询的单词、词根" />
			</view>
		</view>
		
	</view>
	
	<view class="flex-ju-b mr30">
		<view class="flex-ju-b pt30 pl30 posire zindex5 bgfff">
			<view @click="isall=true" class="flex-ju-b size24 pg5-20 bgf9f9f9 ra30">
				{{tindex==1?'字母顺序':tindex==2?'字母逆序':tindex==3?'时间顺序':tindex==4?'时间逆序':'随机排序'}}	 
				
				<image v-if="isall" mode="widthFix" src="/static/xiangtop.png" class="image width32 ml10"></image>
				<image v-else mode="widthFix" src="/static/bottoms.png" class="image width32 ml10"></image>
			
			</view>
		</view>
		<view v-if="type==2" @click="allopen" class="color666 size24 mt20">全部{{iskai?'收起':'展开'}}</view>
	</view>
	
	<view  @click="isall=false" v-if="isall" class="posifi mkds" style="background: rgba(0,0,0,0.6);">
		<view class="bgfff size28 pl30 pt30" style="border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;">
			<view @click="tapsort(1)" class="border-bECEDEE height90 flex-a-i">字母顺序</view>
			<view @click="tapsort(2)" class="border-bECEDEE height90 flex-a-i">字母逆序</view>
			<view @click="tapsort(3)" class="border-bECEDEE height90 flex-a-i">时间顺序</view>
			<view @click="tapsort(4)" class="border-bECEDEE height90 flex-a-i">时间逆序</view>
			<view @click="tapsort(5)" class=" height90 flex-a-i">随机排序</view>
		</view>
	</view>
	
	<view class="">
		<view class="flex-a-i ml30">
			<scroll-view @scrolltolower="tapscrolltolower" scroll-y style="overflow-y: hidden;" class="hrig" :scroll-into-view="scrollview" scroll-with-animation>
				<nodata v-if="isdata"></nodata>
				<template v-if="type==2">
					
					<uni-collapse ref="collapse" v-model="open" class="viewcollapse" @change="change" >
						<uni-collapse-item :id="'section'+item.root[0].toUpperCase()" :show-arrow="false" v-for="(item,index) in list" :key="index" @click.stop="zhaoa(item,index)" class="pb30 border-bECEDEE mt30" title-border="none" :name="'key'+index">
								<template v-slot:title>
									<view @click.stop="navto('/pages/index/root_detail?id='+item.id)" class="flex-ju-b mb20 ">
										<view class="ra32 bold " :class="{color666:item.learnStatus}" >{{item.root}}</view>
										<view>
											<view class="flex-a-i ">
												<view @click.stop="voice(item.pronounce)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
													<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
												</view>
												<view @click.stop="tapopen(item,index)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
													<image mode="widthFix" :src="item.isCollect?'/static/xings.png':'/static/xing.png'" class="image width28"></image>
												</view>
											</view>
										</view>
									</view>
									<view  class="flex-ju-b color666">
										<view class=" size24 one flex1">{{item.meaning}}</view>
										<view class="flex-a-i size22">
											{{item.zhan?'收起':'展开'}}
											<image v-if="item.zhan" mode="widthFix" src="/static/xiangtop.png" class="flex image width32"></image>
											<image v-else mode="widthFix" src="/static/xiangxia.png" class="flex image width32"></image>
										</view>
									</view>
								</template>
								<view class="content">
									<view class="flex-a-i flex-wrap size24">
										<view :class="{color666:items.learnStatus}"  v-for="(items,s) in item.wordList" :key="s" class="mt20 pg2-20 border000 ra20 mr20">{{items}}</view>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
					
				<!-- <view :id="'section'+item.root[0].toUpperCase()" v-for="(item,index) in list" :key="index"   class="border-bECEDEE pb30 mt30">
						<view @click="navto('/pages/index/root_detail?id='+item.id)" class="flex-ju-b mb20">
							<view class="ra32 bold ">{{item.root}}</view>
							<view>
								<view class="flex-a-i">
									<view @click.stop="voice(item.pronounce)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
										<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
									</view>
									<view @click.stop="tapopen(item,index)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
										<image mode="widthFix" src="/static/xings.png" class="image width28"></image>
									</view>
								</view>
							</view>
						</view>
						<uni-collapse ref="collapse" @change="change($event,item)">
							<uni-collapse-item  title-border="none">
								<template v-slot:title>
									<view class="flex-ju-b color666">
										<view class=" size24 one flex1">{{item.paraphrase}}</view>
										<view class="flex-a-i size22">
											{{item.zhan?'收起':'展开'}}
										</view>
									</view>
								</template>
								<view class="content">
									<view class="flex-a-i flex-wrap size24">
										<view v-for="(items,s) in item.wordList" :key="s" class="mt20 pg2-20 border000 ra20 mr20">{{items}}</view>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
				</view> -->
				
				</template>
				<template v-else>
				<view :id="'section'+item.word[0].toUpperCase()" v-for="(item,index) in list" :key="index" @click="navto('/pages/index/words_detail?id='+item.id)" class="border-bECEDEE pb30 mt30">
						<view class="flex-ju-b mb20" >
							<view class="ra32 bold ">{{item.word}}</view>
							<view>
								<view class="flex-a-i">
									<view @click.stop="voice(item.pronounce)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
										<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
									</view>
									<view @click.stop="tapopen(item,index)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
										<image mode="widthFix" src="/static/xings.png" class="image width28"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="color666 size24 one flex1">{{item.paraphrase}}</view>
					</view>
				</template>
				
			</scroll-view>
			<view class="size22 colorD8D8D8">
				<view @click="tapzimu(item)" class="wh60-35 flex-ju-c" v-for="(item,p) in zimu" :key="p">{{item}}</view>
			</view>
		</view>
	</view>
	
	
	
	
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				close:[],
				iskai:false,
				open:[],
				isdata:false,
				arr:['aaa','aaa','aaa','aaa','aaa','bbb','bbb','bbb','bbb','bbb','bbb','ccc','ccc','ccc','ccc','ccc','ddddddd','ddddddd','ddddddd','ddddddd','ddddddd','ddddddd','ggg','ggg','ggg','ggg','ggg','mmm','mmm','mmm','mmm','mmm','mmm','zzz','zzz','zzz','zzz','zzz'],
				key:"",
				scrollview:"",
				zimu:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','S','Y','Z'],
				isall:false,
				type:"",
				list:[],
				id:"",
				tindex:1,
				sort:1,
				isxin:false
			}
		},
		onShow() {
			if(this.isxin){
				var pages = getCurrentPages();
				var page = pages[pages.length - 2];
				page.$vm.setdata =true
				this.getlist()
			}
		},
		onReachBottom() {
		
		},
		onLoad(option) {
			this.type= +option.type + 1
			this.id=option.id
			uni.setNavigationBarTitle({
			  title: option.name,
			});
			
			this.getlist()
		},
		methods: {
			tapscrolltolower(){
				this.page++
				this.getlist()
			},
			zhaoa(item,index){
				if(item.zhan){
					item.zhan = false
				}else{
					item.zhan = true
				}
			},
			allopen(){
				this.iskai = !this.iskai
				
				if(this.iskai){
					this.open=this.close
					this.list.map(item=>{
						item.zhan = true
					})
				}else{
					this.open=[]
					this.list.map(item=>{
						item.zhan = false
					})
				}
				
			},
			change(e,item){
				
				// #ifdef MP
				this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
				// #endif
			},
			tapsort(index){
				this.tindex = index
				this.sort = index
				this.getlist()
			},
			tapsearch(){
				this.getlist()
			},
			getlist(){
				this.http('/api/folder_favorite_relation/page',{
					favoriteFolderId:this.id,
					favoriteType:this.type,
					entry:this.key,
					pageNo:this.page,
					pageSize:10,
					sort:this.sort
				},'post').then(res=>{
					if(res.data.wordFavorite){
						this.list = [...this.list,...res.data.wordFavorite]
						
						if(!this.list.legnth){
							this.nodata(this.list,this)
						}else{
							this.nodata(this.list,this)
						}
					}else{
						if(res.data.rootFavorite){
							this.close=[]
							this.list = [...this.list,...res.data.rootFavorite]
							this.list.map((item,index)=>{
								 this.close.push('key'+index)
							})
							setTimeout(()=>{
								if(this.iskai){
									console.log(4444,this.close)
									this.open=this.close
									this.list.map(item=>{
										item.zhan = true
									})
								}
							},220)
							
						}
						if(!this.list){
							this.nodata([],this)
						}else{
							this.nodata(this.list,this)
						}
					}
					
					
				})
			},
			tapopen(item,index){
				this.http('/api/folder_favorite_relation/cancel',{
					entryId:item.id,
					type:this.type
				}).then(res=>{
					this.toast('已取消')
					this.list.splice(index,1)
					this.nodata(this.list,this)
					var pages = getCurrentPages();
					var page = pages[pages.length - 2];
					page.$vm.setdata =true
					
				})
			},
			tapzimu(item){
				this.scrollview ='section'+item
			}
		}
	}
</script>

<style>
.mkds{
	width: 100vw;
	height: 100vh;
	z-index: 5;
}
.hrig{
	height:calc(100vh - 121px)
}

</style>
